<template>
    <div class="search-index">
        <div class="search-input">
            <img src="@/assets/images/search/Top Left.png" class="topleft"/>
            <img src="@/assets/images/search/Top right.png" class="topright"/>
            <img src="@/assets/images/search/Bottom Left.png" class="bottomleft"/>
            <img src="@/assets/images/search/Bottom right.png" class="bottomright"/>
            <div class="shade"></div>
            <div class="line"></div>
        </div>
        <div class="search-photograph" @click="handlePhotograph">
            <span>拍照</span>
        </div>
        <div class="search-photoalbum" @click="handlePhotoalbum">
            <span>相册</span>
        </div>
    </div>
    <TabNav />
</template>

<script setup>
defineOptions({
    name: 'SearchIndex'
})
// import { ref } from 'vue'
import { useRouter } from 'vue-router'
import TabNav from '@/components/TabNav/TabNav.vue'
import { ImageRecognition } from './api/index'
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'

const router = useRouter()

const handlePhotograph = () => {
    console.log('拍照')
}

const handlePhotoalbum = () => {
    const input = document.createElement('input')
    input.type = 'file'
    input.accept = 'image/*'
    input.multiple = false
    
    input.onchange = async (e) => {
        const files = e.target.files
        if (!files.length) return
        
        try {
            const formData = new FormData()
            formData.append('file', files[0])
            
            const response = await ImageRecognition(formData)
            
            // 创建图片URL
            const imageUrl = URL.createObjectURL(files[0])
            
            // 使用 query 传递数据
            router.push({
                name: 'CertificationResult',
                query: {
                    predictionData: JSON.stringify(response.data.prediction),
                    imageUrl: imageUrl
                }
            })
        } catch (error) {
            console.error('识别失败：', error)
            ElMessage.error('识别失败，请重试')
        }
    }
    
    input.click()
}

</script>

<style lang="scss" scoped>
.search-index {
    background-color: rgb(226, 225, 225);
    width: 100%;
    height: 100vh;
    position: relative;

    .search-input{
        position: relative;
        width: 355px;
        height: 500px;
        opacity: 1;
        margin-left: 10px;
        border-radius: 27px;
        background-color: rgba(196, 196, 196, 1);

  

        .topleft{
            position: absolute;
            margin-left: 30px;
            margin-top: 130px;
        }
        .topright{
            position: absolute;
            margin-left:220px;
            margin-top: 125px;
        }

        .bottomleft{
            position: absolute;
            margin-left:30px;
            margin-top: 310px;

        }

        .bottomright{
            position: absolute;
            margin-left:220px;  
            margin-top: 305px;

        }

        .shade{
            width:270px;
            height: 155px;
            opacity: 1;
            border-radius: 0px 0px, 55px, 53px;
            background: linear-gradient(180deg, rgba(196, 196, 196, 0.36) 0%, rgba(255, 255, 255, 0.36) 1%, rgba(255, 255, 255, 0) 100%);
            position: absolute;
            top: 270px;
            left: 40px;
        }

        .line {  
            position: absolute;
            left: 40px;
            top: 270px;
            width: 270px;
            height: 2px; /* 将高度调低可以让线条更细 */
            opacity: 1;
            border: none;
            background-image: linear-gradient(to right, 
                            rgba(255, 255, 255, 1) 50%, 
                            rgba(196, 196, 196, 1) 10%); 
            background-size: 16px 1px; /* 调整背景图案的大小以增加间隔 */
            box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        }
    }

    .search-photograph{
        position: absolute;
        top: 530px;
        left: 35px;
        width: 120px;
        height: 51px;
        opacity: 1;
        border-radius: 10px;
        background-color:rgba(141, 159, 94);

        span{
            font-size: 24px;
            display: flex; // 改为 flex 布局
            justify-content: center; // 水平居中
            align-items: center; // 垂直居中
            width: 100%; // 占据整个宽度
            height: 100%; // 占据整个高度
            color: rgba(244, 244, 244, 1);
            
        }
    }
    .search-photoalbum{
        position: absolute;
        top: 530px;
        left: 220px;
        width: 120px;
        height: 51px;
        opacity: 1;
        border-radius: 10px;
        background-color:rgba(141, 159, 94);

        span{
            font-size: 24px;
            display: flex; // 改为 flex 布局
            justify-content: center; // 水平居中
            align-items: center; // 垂直居中
            width: 100%; // 占据整个宽度
            height: 100%; // 占据整个高度
            color: rgba(244, 244, 244, 1);
            
        }
    }
}
</style>